<template>
  <div class="page-container">
    <list-searcher :searchList="searchList" v-model:searchForm="queryParam" @loadData="loadData" columns="2" />
    <table-index :table="table" @loadData="loadData" :key="iindex">
      <template #expand-icon="{ expanded }">
        <icon-plus-circle style="font-size: 20px; color: #0256ff" v-if="!expanded" />
        <icon-minus-circle style="font-size: 20px; color: #0256ff" v-else />
      </template>
      <template #name="{ record }"> {{ record.show ? record.dictName : record.name }}</template>
      <template #systemType="{ record }">
        {{ record.show ? record.typeName : ' ' }}
      </template>
      <template #systemDate="{ record }">
        {{ record.show ? record.updateTime : ' ' }}
      </template>
      <template #systemName="{ record }">
        {{ record.show ? record.updateUserName : ' ' }}
      </template>
    </table-index>
  </div>

  <SysdictModal ref="sysdictModal" @save="saveOk" />
</template>

<script setup name="SystemParamList">
  import SysdictModal from '@/components/sysdict/sysdict-modal.vue'
  import { useTable, useFetchTableDataApiNoPage } from '@/hooks/table'
  import { getSystemList } from '@/api/system/system'
  import { onMounted, reactive, computed, ref } from 'vue'
  import { dispacthSysDict } from '@/hooks/useDict'

  const sysdictModal = ref(null)

  // 接口参数（不包含page信息）
  const queryParam = reactive({})
  // 查询条件
  const searchList = computed(() => {
    return [{ label: '功能名称', prop: 'dictName', type: 'a-input' }]
  })

  // table 配置
  const table = useTable({
    columns: [
      { title: '功能名称', dataIndex: 'name', width: 150, fixed: 'left', slotName: 'name' },
      { title: '类型', dataIndex: 'type', width: 100, slotName: 'systemType' },
      { title: '最近修改时间', dataIndex: 'updateDate', width: 170, slotName: 'systemDate' },
      { title: '最近修改人', dataIndex: 'updateUserName', width: 110, slotName: 'systemName' },
    ],
    operates: [
      {
        label: '编辑',
        show: (record) => record.show,
        method: (record, column, rowIndex) => editSystemClick(record, column, rowIndex),
      },
    ],
    buttons: [],
    pagination: false,
    defaultExpandedKeys: [],
  })

  const iindex = ref(0)
  const loadData = (page) => {
    const fn = useFetchTableDataApiNoPage(table, queryParam, getSystemList)
    fn(page).then((res) => {
      if (res) {
        if (res.length > 0) {
          if (queryParam.dictName) {
            getChildId(res)
          } else {
            iindex.value++
            table.defaultExpandedKeys = []
          }
        }
      }
    })
  }

  const getChildId = (list) => {
    list.forEach((i) => {
      table.defaultExpandedKeys.push(i.id)
      // 阻断至菜单类型
      if (i.children && i.children.length && i.children[0].type == 'MENU') {
        iindex.value++
        getChildId(i.children)
      } else {
        return false
      }
    })
  }

  const systemId = ref(null)
  const systemCode = ref(null)
  const editSystemClick = (record) => {
    systemId.value = record.id
    systemCode.value = record.dictCode
    sysdictModal.value.show(systemId.value, null)
  }

  const saveSub = (res) => {
    console.log('确认', res)
  }

  const saveOk = () => {
    // console.log('确认', res, systemCode.value)
    dispacthSysDict(systemCode.value)
    loadData()
  }

  defineExpose({
    saveSub,
    saveOk,
  })

  // mounted 调用接口
  onMounted(() => {
    loadData()
  })
</script>

<style lang="less" scoped>
  :deep(.arco-table-expand-btn) {
    width: 20px;
    height: 20px;
    background-color: inherit;
  }
  :deep(.arco-table-expand-btn:hover) {
    width: 20px;
    height: 20px;
    background-color: inherit;
  }
</style>
